<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="/meals/favicon.ico"/>
  <title>就餐签到扫码系统</title>
  <link href="/meals/scan/css/reset.css" rel="stylesheet" type="text/css" />
  <link href="/meals/scan/css/scan.css" rel="stylesheet" type="text/css" />
  <script src="/meals/scan/js/vue.min.js"></script>
</head>
<body>
  <div class="pages-index_container" id="app">
      <ul class="lists-wrapper clearfix" v-if="pageData.length > 0">
        <li class="item-wrapper" v-for="(item, index) in pageData" :key="index">
          <div class="order-item-container" :class="{'active1': item.status === 1, 'active2': item.status === 2}">
              <div v-if="item.types === '1'">
                <p v-if="item.dinnerType === '0'" class="dinner-type">早餐</p>
                <p v-else-if="item.dinnerType === '1'" class="dinner-type">中餐</p>
                <p v-else-if="item.dinnerType === '2'" class="dinner-type">晚餐</p>
                <p v-else-if="item.dinnerType === '3'" class="dinner-type">其他餐</p>
                <div class="order-name-wrapper">
                  <div class="left-icon" :class="{'active1': (item.status === 1)}">{{ item.sort }}</div>
                  <p class="name" :class="{'active': (item.status === 1 || item.status === 2)}">
                    <span>{{ item.userName }}</span>
                    <span style="float: right;">{{ item.bookNum }}份</span>
                  </p>
                </div>
                <div class="menu-wrapper" v-if="item.bookDishes.length > 0">
                  <ul class="menu-ul">
                    <li class="menu-li clearfix" :class="{'active': (item.status === 1 || item.status === 2)}" v-for="(menu, index) in item.bookDishes" :key="index">
                      <p class="menu-name">{{ menu.dishName }}</p>
                      <p class="num-wrap">x {{ menu.several }}</p>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="has-eat-wrapper" v-else>
                <p v-if="item.dinnerType === '0'" class="dinner-type">早餐</p>
                <p v-else-if="item.dinnerType === '1'" class="dinner-type">中餐</p>
                <p v-else-if="item.dinnerType === '2'" class="dinner-type">晚餐</p>
                <p v-else-if="item.dinnerType === '3'" class="dinner-type">其他餐</p>
                <div class="order-name-wrapper">
                  <div class="left-icon" :class="{'active1': (item.status === 1)}">{{ item.sort }}</div>
                  <p class="name name-has" :class="{'active': (item.status === 1 || item.status === 2)}">{{ item.userName }}</p>
                  <span class="has-num" :class="{'active': (item.status === 1 || item.status === 2)}">{{ item.bookNum }}份</span>
                </div>
              </div>
            </div>
        </li>
      </ul>

      <div class="no-data-wrapper" @click="getListsData" v-if="tips">
        <img src="/meals/scan/imgs/wushuju.png"/>
        <p class="name">{{ tips }}</p>
      </div>

      <ul class="handle-wrapper">
        <li @click="screenFullCli">全屏</li>
        <li><a href="/meals/scan/qrcode/qrcode" target="_blank">二维码</a></li>
        <li @click="logout">退出</li>
      </ul>
    </div>
  <script src="/meals/scan/js/axios.min.js"></script>
  <script src="/meals/scan/js/screenfull.js"></script>
  <script>
    new Vue({
      name: 'pageIndex',
      el: '#app',
      data() {
        return {
          isFullscreen: false,
          pageData: [],
          isLoading: false,
          tips: ''
        }
      },
      mounted() {
          window.setInterval(() => {
              this.getListsData()
          }, 5000)
      },
      methods: {
        // 获取订餐数据
        getListsData() {
          axios.get('/meals/statistic/book/eatBooks').then((res) => {
            const response = res.data
            if (response.code === 0) {
              this.filterPageData(response.data)
              if (response.data.length === 0) {
                  this.pageData = []
                  this.tips = '暂无人就餐'
              }
            } else if (response.code === -1) {
                this.pageData = []
                this.tips = response.msg
            } else {
                this.pageData = []
                this.tips = '服务器请求出现异常'
                location.href = '/meals/scan/qrcode'
            }
          }).catch(() => {
            this.pageData = []
            this.tips = '网络请求出现错误'
            location.href = '/meals/scan/qrcode'
          })
        },
        filterPageData(resData) {
          let greenArray = []
          let yellowArray = []
          let writeArray = []
          let firstIndex = 0
          let secondIndex = 0
          if (resData.length > 0) {
              this.tips ='';
            // 获取第一颜色的数组
            resData.map((_data, _index) => {
              if (resData[0].sort === _data.sort) {
                _data.status = 1
                greenArray.push(_data)
                firstIndex = _index + 1
              }
            })
            // 获取第二颜色的数组
            if (resData.slice(firstIndex).length > 0) {
              resData.slice(firstIndex).map((_sData, _sIndex) => {
                if (resData.slice(firstIndex)[0].sort === _sData.sort) {
                  _sData.status = 2
                  yellowArray.push(_sData)
                  secondIndex = _sIndex + firstIndex + 1
                }
              })
              // 获取第三颜色的数组
              secondIndex > 0 && (writeArray = resData.slice(secondIndex))
            }
            // 合并数组
            this.pageData = [].concat(greenArray, yellowArray, writeArray)
          }
        },
        screenFullCli() {
          if (!screenfull.enabled) {
            alert('设备不支持全屏')
            return false
          }
          screenfull.toggle()
        },
        logout() {
          axios.get('/meals/scan/qrcode/logout').then((res) => {
              if (res.code === 0) {
              location.href = '/meals/scan/qrcode'
            }
          })
        }
      }
    })
  </script>
</body>
</html>
